
<template>
	<div class="To-money-main">
		<div class="To-share">
			<div class="view-detail">
				<span class="active-num">
					已激活买家
					<span class="r-color">{{0}}</span>
					人
				</span>
				<router-link :to="{name:'myAccount',query:{type:6}} ">
					<span class="go-view">查看详情</span>
				</router-link>
			</div>
			<div class="invite-wrapper">
				<div class="red-label">二维码</div>
				<div class="qcode" ref="qcode"></div>
				<div class="red-label">邀请码</div>
				<div class="invite-code">{{user.invitecode}}</div>
				<div class="red-label">邀请链接</div>
				<div class="invite-url">{{url}}</div>
			</div>
			<!-- 分享赚金视频 -->
			<!-- <div class="To-share-btn">分享赚金奖励规则</div> -->
			<!-- text -->
			<div class="To-share-text">
				<!-- title -->
				<div class="To-share-title">
					<div class="To-share-auto">
						<span>
							<a class="To-border"></a>
							<a>受邀者是买家</a>
						</span>
						<span>
							获取推广资格起，30个自然天内
						</span>
					</div>
				</div>
				<!-- 规则1 -->
				<div class="To-rule">
					<h6>1.首单现金奖励：(1金币=1元)</h6>
					<p>A邀请买家B，买家B完成首单后，A可获得2金币奖励。B买家邀请C买家，C买家完成首单后A可以获得1金币，C买家邀请D买家，D买家完成首单后，A买家可以获得0.5金币。(A-D、B-E 、C-F依此推送3级)</p>
					<div class="To-rule-img">
						<img src="../../../static/imgs/tgsnt1.65c0261.png" alt="" title=""/>
					</div>
				</div>
			</div>
		</div>
		<div class="clear-border"></div>
		<div class="To-share">
			<!-- text -->
			<div class="To-share-text">
				<!-- 规则1 -->
				<div class="To-rule">
					<h6>2.抽佣奖励</h6>
					<p>邀请成功注册买家，该买家每成功完成一单任务，平台奖励邀请人该买家佣金10%的对等金币。（如，A邀请了B，B完成任务后，得到佣金100元，那平台就会自动返款100*10%=10金币给A，抽佣三级模式同现金奖励，抽佣百分比依次为B*10% \C*5%\ D*3%）</p>
				</div>
			</div>
		</div>
		<div class="clear-border"></div>
		<div class="To-share">
			<!-- text -->
			<div class="To-share-text">
				<!-- 规则1 -->
				<div class="To-rule">
					<h6>3.买家购买VIP现金奖励</h6>
					<p>被邀请的买家，成功缴费充值VIP会员，平台奖励金币三级模式为B=30金币/C=15金币/D=10金币，抽佣等级同上。</p>
					<div class="To-rule-img">
						<img src="../../../static/imgs/tgsnt2.576abfe.png" alt="" title=""/>
					</div>
					<div class="To-rule-btn">
					<div class="To-rule-btn-auto" v-if="false">
						<a>推广手机买家</a>
						<a>推广PC买家</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="clear-border"></div>
		<!-- 激活买家 -->
		<div class="To-rule-buyer" v-if="false">
			<div class="To-rule-buyer-box">
				<p>激活买家</p>
			<p>(首次成功完成任务,奖励1金)</p>
			<div class="To-rule-buyer-btn">
				<span>
					<a>已接单</a>
					<a>0人</a>
				</span>
				<span>
					<a>已完成</a>
					<a>0人</a>
				</span>
			</div>
			<div class="To-rule-look">查看详情</div>
			</div>
		</div>
		<div class="clear-border"></div>
		<!-- 受邀者是商家 -->
		<div class="To-rule-user" v-if="false">
			<div class="To-rule-user-box">
				<div class="To-rule-user-title">
					<div class="rule-user-title-auto">
						<a></a>
						<a>受邀者是商家</a>
					</div>
				</div>
				<div class="rule-user-title-con">
					<div class="user-title-con-auto">
						<p>1.成功邀请商家注册，并发布任务。平台奖励邀请人该商家每笔任务佣金额10%的对等金币｛如，C邀请了商家D，D发布任务单数的总佣金额为200元，那平台就会自动返款200*10%=20金币给C。｝</p>
						<p>2.被邀请的商家成功缴费成为VIP商家会员，平台奖励会员费10%对等金额的金币给邀请人。</p>
						<p>3.返佣奖励周期为入住日起计算，顺延30天</p>
						<div class="con-auto-btn">推广商家</div>
					</div>
				</div>
			</div>
		</div>
		<div class="clear-border"></div>
		<!-- 激活买家 -->
		<div class="To-rule-buyer" v-if="false">
			<div class="To-rule-buyer-box">
				<p>激活商家</p>
			<div class="To-rule-buyer-btn">
				<span>
					<a>已接单</a>
					<a>0人</a>
				</span>
				<span>
					<a>已完成</a>
					<a>0人</a>
				</span>
			</div>
			<div class="To-rule-look">查看详情</div>
			</div>
		</div>
		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>
<script>
  import {mapGetters} from 'vuex'
	import IndexFooter from '@/components/base/IndexFooter'
  import Qrcode from '~common/plugin/QRCode.js'
	export default{
		name:'toMoney',
		data(){
		  return {
			  url: '',
			  activeNum: 0
		  }
		},
    mounted(){
		  let url=window.location.href.replace('toMoney','register')+"?invite="+this.user.invitecode
	  this.url = url;

// 设置参数方式
      let qrcode = new Qrcode(this.$refs.qcode, {
        text: url,
        colorDark : '#000000',
        colorLight : '#ffffff',
      });

    },
    computed:{
      ...mapGetters([
        'user'
      ])
    },
		components: {
			IndexFooter
		}
	}
</script>

<style lang="less">
	/* 商家 */
	.To-rule-user{
		width: 100%;
		height: 3.24rem;
		background: #f5f5f5;
		float:left;
	}
	.To-rule-user-box{
		width: 3.6rem;
		margin: 0 auto;
		height: 100%;
		background: white;
		border-radius: 0.05rem;
	}
	.To-rule-user-title{
		width: 100%;
		height: 0.59rem;
		line-height: 0.59rem;
		border-bottom: 0.01rem solid #e6e6e6;
	}
	.rule-user-title-auto{
		width: 92%;
		margin: 0 auto;
	}
	.To-rule-user-title a{
		display:inline-block;
		float:left;
		color: rgb(255,90,1);
		font-size: 0.14rem;
	}
	.To-rule-user-title a:first-child{
		width: 0.05rem;
		height: 0.12rem;
		background: rgb(255,90,1);
		margin: 0.23rem 0.1rem 0 0;
	}
	.rule-user-title-con{
		width: 100%;
		float:left;
		height:auto;
		margin-top: 0.1rem;
	}
	.user-title-con-auto{
		width: 92%;
		margin: 0 auto;
		overflow: hidden;
	}
	.user-title-con-auto p{
		width: 100%;
		color: #777;
		font-size: 0.12rem;
		line-height: 0.22rem;
		margin-bottom: 0.1rem;
	}
	.user-title-con-auto p:last-child{
		margin-bottom: inherit;
	}
	.con-auto-btn{
		width: 92%;
		height: 0.4rem;
		margin: 0 auto;
		line-height: 0.4rem;
		border-radius: 0.2rem;
		background: #4097FF;
		text-align: center;
		color: white;
		font-size: 0.14rem;
	}
	/* 激活买家 */
	.To-rule-buyer{
		width:100%;
		height: 1.5rem;
		float:left;
		background: #f5f5f5;
	}
	.To-rule-buyer-box{
		width: 3.6rem;
		height: auto;
		margin: 0 auto;
		padding-bottom: 0.2rem;
		overflow: hidden;
		background: white;
	}
	.To-rule-buyer p{
		text-align: center;
	}
	.To-rule-buyer p:nth-child(1){
		margin-top: 0.1rem;
		font-size: 0.14rem;
		color: #333;
	}
	.To-rule-buyer p:nth-child(2){
		margin-top: 0.05rem;
		color: #777;
		font-size: 0.12rem;
	}
	.To-rule-buyer-btn{
		width: 2rem;
		margin: 0.15rem auto 0 auto;
		border:0.01rem solid #4097FF;
		border-radius: 0.2rem;
		height: 0.26rem;
		line-height: 0.26rem;
	}
	.To-rule-buyer-btn span{
		width: 50%;
		float: left;
		line-height: 0.26rem;
		text-align: center;
		color:#4097FF;
		border-right:0.01rem solid #4097FF;
		font-size: 0.12rem;
	}
	.To-rule-buyer-btn span:last-child{
		width: 49%;
		border-right: none;
	}

	.To-money-main{
		width:100%;
		height:100%;
		padding-bottom: 0.5rem;
		overflow-y:auto;
	}
	.To-money-to{
		width: 100%;
		height: 0.89rem;
	}
	.To-money-to p{
		color: #333;
		font-size: 0.14rem;
		height: 0.37rem;
		line-height: 0.37rem;
		margin-left: 0.1rem;
	}
	.To-money-to p:nth-child(1){
		text-align: center;
		height: 0.51rem;
		margin-left: inherit;
		line-height: 0.51rem;
		border-bottom: 0.01rem solid #e6e6e6;
	}
	.To-money-to p .p-color{
		color: red;
	}
	.clear-border{
		width: 100%;
		height: 0.1rem;
		float:left;
		background: #f5f5f5;
	}
	.To-money-btn{
		width: 100%;
		height: 2.5rem;
		float:left;
	}
  .qcode{
    height: 2.5rem;
    width: 2.5rem;
    margin: 0px auto;
  }
	.To-money-box{
		width: 92%;
		margin: 0 auto;
	}
	.To-money-box a{
		width: 100%;
		height: 0.4rem;
		display: block;
		float:left;
		cursor: pointer;
		line-height: 0.4rem;
		border-radius: 0.2rem;
		background: #0C92F3;
		text-align: center;
		color: white;
		font-size: 0.14rem;
	}
	.To-money-box a:first-child{
		margin:0.2rem 0 0.2rem 0
	}
	.To-leiji{
		width: 100%;
		height: 0.37rem;
		float:left;
		line-height: 0.37rem;
	}
	.To-leiji-box{
		width: 90%;
		margin: 0 auto;
	}
	.To-leiji-box span{
		display: block;
		float:left;
		color: #333;
		font-size: 0.13rem;
	}
	.To-leiji-box span a{
		display: inline-block;
		float: left;
		font-size: 0.13rem;
		margin-right: 0.05rem;
	}

	.To-leiji-box span:last-child{
		float:right;
	}
	.To-leiji-box span a:first-child{
		color: #4097FF;
	}
	.To-share{
		width: 100%;
		height: auto;
		background: #f5f5f5;
		float:left;
	}
	.To-share-btn{
		width: 3.6rem;
		height: 0.4rem;
		margin: 0.1rem auto;
		border-radius: 0.2rem;
		color: #4097ff;
		text-align: center;
		font-size: 0.16rem;
		background: white;
		line-height: 0.4rem;
	}
	.To-share-text{
		width: 3.6rem;
		height: auto;
		margin: 0 auto;
		background: white;
		border-radius: 0.05rem;
	}
	.To-share-title{
		width: 100%;
		height: 0.59rem;
		line-height: 0.59rem;
		border-bottom: 0.01rem solid #e6e6e6;
	}
	.To-share-title .To-share-auto{
		width: 90%;
		margin: 0 auto;
	}
	.To-share-title span .To-border{
		width: 0.05rem;
		height: 0.12rem;
		margin:0.23rem 0.05rem 0 0;
		background: #4097ff;
	}
	.To-share-auto span{
		display: block;
		color: #777;
		font-size: 0.12rem;
		float:left;
	}
	.To-share-auto span:last-child{
		float: right;
	}
	.To-share-auto span a{
		color: #4097ff;
		display: inline-block;
		float: left;
		font-size: 0.14rem;
	}
	.To-rule{
		width: 100%;
		// height: 4.2rem;
		padding-bottom: 0.2rem;
	}
	.To-rule h6{
		text-align: center;
		font-weight: normal;
		height: 0.2rem;
		padding: 0.15rem 0 0.1rem 0;
		color: #333;
		font-size: 0.14rem;
	}
	.To-rule p{
		width: 3.2rem;
		margin: 0 auto;
		color: #777;
		line-height: 0.22rem;
		font-size: 0.13rem;
	}
	.To-rule-img{
		width: 94%;
		margin: 0 auto;
		padding: 0.2rem 0;
	}
	.To-rule-img img{
		display: block;
		width: 100%;
	}
	.To-rule-btn{
		width: 100%;
		float:left;
		background: white;
		padding-bottom: 0.2rem;
		margin-top: 0.1rem;
	}
	.To-rule-btn-auto{
		width:80%;
		height: auto;
		margin: 0 auto;
	}
	.To-rule-btn-auto a{
		width: 1.3rem;
		height: 0.36rem;
		display: block;
		line-height: 0.36rem;
		float:left;
		font-size: 0.12rem;
		color: white;
		margin-right: 0.2rem;
		text-align: center;
		border-radius: 0.2rem;
		background: #0C92F3;
	}
	.To-rule-btn-auto a:last-child{
		margin-right: inherit;
	}
	.To-rule-look{
		width: 0.85rem;
		height: 0.26rem;
		margin: 0.15rem auto 0 auto;
		text-align: center;
		color: white;
		font-size: 0.12rem;
		line-height: 0.25rem;
		background: #4097FF;
		border-radius: 0.2rem;
	}
	.view-detail {
		width: 3.6rem;
		height: 0.4rem;
		margin: 0.1rem auto;
		border-radius: 0.2rem;
		/* color: #4097ff; */
		text-align: center;
		font-size: 0.16rem;
		background: white;
		line-height: 0.4rem;
		.active-num {
			// display: inline-block;
			float: left;
			margin-left: 0.2rem;
			.r-color {
				color: #E43A45;
			}
		}
		.go-view {
			float: right;
			margin-right: 0.2rem;
			color: #E43A45;
		}
	}
	.invite-wrapper {
		text-align: center;
		width: 3.6rem;
		height: auto;
		margin: 0 auto 0.1rem auto;
		background: white;
		border-radius: 0.05rem;
		padding: 0.1rem 0;
		.red-label {
			// width: 0.85rem;
			// height: 0.26rem;
			font-size: 0.18rem;
			color: #E43A45;
			margin-top: 0.04rem;
			margin-bottom: 0.04rem;
		}
		.qcode {
			height: 2.5srem;
			width: 2.5rem;
			margin: 0.2rem auto 0.3rem auto;
		}
		.invite-code {
			font-size: 0.28rem;
			margin-bottom: 0.2rem;
		}
		.invite-url {
			padding: 0.1rem;
			width: 3rem;
			margin: 0px auto;
			border-radius: 0.05rem;
			background: #eee;
			font-size: .12rem;
		}
	}
</style>
